<template>
  <div>
    <el-container style="height: 100vh; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1','2', '3']" router>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>终端配置</template>
            <el-menu-item-group>
              <template slot="title"></template>
              <el-menu-item index="/map">终端地图</el-menu-item>
              <el-menu-item index="/home">摄像头配置</el-menu-item>
            </el-menu-item-group>
            <el-menu-item index="delcam">删除终端</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>数据管理</template>
            <el-menu-item index="list">摄像头数据</el-menu-item>
            <!-- <el-menu-item index="/statistic_chart">统计图表</el-menu-item> -->
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>视频查看</template>
            <el-menu-item-group>
              <template slot="title"></template>
              <el-menu-item index="liveview">实时浏览</el-menu-item>
              <el-menu-item index="review">录像视频</el-menu-item>
              <el-menu-item index="live">多路播放</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="safe_quit">安全退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{person_name}}</span>
        </el-header>

        <el-main id="elmain">
          <el-steps :active="active" finish-status="success" class="step_bar">
            <el-step title="步骤 1" description="选择终端"></el-step>
            <!-- <el-step title="步骤 2" description="ID校验"></el-step> -->
            <el-step title="步骤 2" description="取流设置"></el-step>
            <el-step title="步骤 3" description="算法配置"></el-step>
          </el-steps>
          <div class="id_test" v-if="active === 0">
            <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
              <span style="text-align: center">是否重新配置终端算法，点击确定之后算法将会重置</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="chongxinpeizhi">确 定</el-button>
              </span>
            </el-dialog>
            <el-table :data="tableData" style="width: 60vw; margin:auto">
              <el-table-column label="终端号" width="300">
                <template slot-scope="scope">
                  <i class="el-icon-info"></i>
                  <span style="margin-left: 10px">{{ scope.row.terminal }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配置情况" width="300">
                <template slot-scope="scope">
                  <el-tag size="medium">{{ scope.row.detail }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handlechakan(scope.$index, scope.row)" :disabled="scope.row.peizhi">
                    <el-button type="text" @click="open" :disabled="scope.row.peizhi">查看配置</el-button>
                  </el-button>
                  <el-button size="mini" type="danger" @click="handlepeizhi(scope, scope.row)">配置
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="setting" v-if="active === 1">
            <el-row>
              <el-select v-model="cam_value" placeholder="请选择摄像头类型">
                <el-option v-for="item in cam_options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-button @click="dialogFormVisible=true" :disabled="cam_flag">确定</el-button>
            </el-row>

            <el-dialog title="信息配置" :visible.sync="dialogFormVisible" width="400px">
              <el-form :model="login_info">
                <el-form-item label="设备号: ">
                  <el-input v-model="login_info.devId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="通道编号: ">
                  <el-input v-model="login_info.channelNo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="通道号: ">
                  <el-input v-model="login_info.channel" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="login_confirm">确 定</el-button>
              </div>
            </el-dialog>

            <el-dialog title="RTSP" :visible.sync="rtsp_show">
              <el-table>
                <el-table-column property="rtsp" label="rtsp"></el-table-column>
              </el-table>
            </el-dialog>

            <el-row style="text-align: center; margin-top: 40px">
              <el-button @click="cam_id_confirm" :disabled="cam_confirm">确定</el-button>
              <el-button>查看rtsp</el-button>
            </el-row>

            <el-row style="margin-top: 80px; margin-bottom: 40px">
              <!--  -->
              <el-button style="margin-top: 12px;" @click="previous">上一步
              </el-button>
              <el-button style="margin-top: 12px;" @click="next" :disabled="next_flag">下一步
              </el-button>
            </el-row>
          </div>

          <div class="algorithm" v-if="active === 2">

            <el-row>
              <el-button type="success" round>
                <router-link to="liveview">跳过</router-link>
              </el-button>
            </el-row>
          </div>
        </el-main>

        <el-footer style="text-align: center; font-size: 10px">
          版权所有 © 雷佳千
        </el-footer>
      </el-container>
    </el-container>

  </div>
</template>

<script>
  export default {
    name: "home",
    data() {
      return {
        // configview:"inline",
        person_name: '',
        active: 0,
        value: '', //要配置的终端
        next_flag: true, //第一步“下一步”按钮的标志位
        tableData: [{
          terminal: 1,
          detail: '未配置',
          peizhi: true
        }, {
          terminal: 2,
          detail: '未配置',
          peizhi: true
        }, {
          terminal: 3,
          detail: '未配置',
          peizhi: true
        }, {
          terminal: 4,
          detail: '未配置',
          peizhi: true
        }],
        cam_value: '', //选中的相机类型
        cam_flag: false, //标志是否已经选择相机
        dialogFormVisible: false, //是否隐藏弹出的登录界面
        cam_confirm: true,
        login_info: { //用户输入的登录信息
          devId: '',
          channelNo: '',
          channel: ''
        },
        // cam_data: generateData(),  //可以选择的摄像头编号
        // cam_id: [],  //选择的摄像头编号
        titles: ['可选摄像头编号', '已选摄像头编号'], //选择摄像头部件的标题
        rtsp_show: false, //rtsp显示窗口是否显示
        // gridData: [],  //rtsp窗口显示的数据
        // formInline: [],
        PeizhiVisible: false,
        peizhiData: [],
        centerDialogVisible: false,
        terminal_id: '', //当前配置的id
        terminal_id_dev: [{
          devId: '',
          channelNo: '',
          channel: ''
        }],
        cam_options: [{
          value: '海康',
          label: '海康'
        }, {
          value: '其他',
          label: '其他'
        }]
      }
    },
    methods: {
      next() {
        // console.log(this.active) //点击下一步
        if (this.active++ > 2) this.active = 0;
        this.next_flag = false
        this.next_flag = !this.next_flag
      },
      // safe_quit() {
      //   sessionStorage.clear();
      //   console.log("lalallallal")
      //   this.$router.push('/')

      // },
      previous() {
        if (this.active-- < 0) this.active = 0;
        this.next_flag = false
      },
      chongxinpeizhi() { //确定配置终端号

        let that = this;
        that.centerDialogVisible = false;
        that.clear_input();
        //delete terminid 的cam数据
        $.ajax({
          url: that.$site + "api/del_idconfig_by_terminal",
          dataType: "json",
          data: {
            terminal_id: that.terminal_id
          },
          success: function (data) {
            if (data['res'] === "yes") {
              if (that.active++ > 2) that.active = 0;
            } else {
              that.$message({
                message: '网络错误，请重试',
                type: 'warning'
              });
            }
          }
        })
      },
      handlechakan(index, row) { //查看已经配置好的摄像头de配置
        this.PeizhiVisible = true;
        let that = this;
        this.$http.get(this.$site + 'api/search_idconfig_by_terminal?terminal=' + row.terminal)
          .then((response) => {
            // console.log(response);
            that.peizhiData = response.body;
            that.terminal_id_dev[0].devId = that.peizhiData[0].devId
          });
        // console.log(index, row.terminal);
      },
      handlepeizhi(index, row) {
        this.terminal_id = row.terminal;
        this.centerDialogVisible = true;
      },


      login_confirm() { //登录的函数
        //  console.log(this.login_info.devId)
        var that = this
        if (this.login_info.devId === '' || this.login_info.channelNo === '' || this.login_info.channel === '') {
          that.$message({
            message: '请填充所有的选项哦',
            type: 'warning'
          });
        } else {
          this.dialogFormVisible = false
          this.cam_confirm = false
        }


      },
      cam_id_confirm() { //传递info到后端服务器，存储到数据库
        let that = this;
        this.next_flag = false;
        $.ajax({
          url: this.$site + "api/add_dev",
          dataType: "json",
          data: {
            terminal_id: this.terminal_id,
            devId: this.login_info.devId,
            channelNo: this.login_info.channelNo,
            channel: this.login_info.channel
          },
          success: function (data) {
            console.log("info_ok")

          }
        })

      },

      clear_input() {
        this.terminal_id_dev.devId = '',
          this.terminal_id_dev.channelNo = '',
          this.terminal_id_dev.channel = ''
      },
      //this.terminal_id_dev[0]
      open() {
        this.$alert(this.terminal_id_dev[0].devId, '设备号', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }

    },

    mounted() {
      // let that = this;
      console.log("渲染完");
      this.$http.get(this.$site + 'api/search_terminal')
        .then((response) => {
          response = response.body
          for (var i = 0, l = response.length; i < l; i++) {
            this.tableData[response[i][0] - 1].detail = '已配置';
            this.tableData[response[i][0] - 1].peizhi = false
          }

        })
      var person_name = sessionStorage.getItem('person_name');
      if (person_name === null) {
        this.$router.push('/')
      } else {
        this.person_name = person_name
      }
    }
  }

</script>

<style scoped>
  .step_bar {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 30px;
  }

  .id_test,
  .setting,
  .algorithm {
    margin-top: 50px;
    text-align: center;
  }

  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

</style>
